<h1>Address Form</h1>

<div class="alert alert-info" role="alert">
    Error messages per field and disabled save button until entire form is valid.
</div>

<form (ngSubmit)="onSubmit()" [formGroup]="form">
    <div class="form-row">
        <div class="formHeading">First Name</div>
        <input type="text" id="firstName" formControlName="firstName">
        <div class="errorMessage" *ngIf="form.controls.firstName.touched && !form.controls.firstName.valid">First Name is required</div>
    </div>

    <div class="form-row">
        <div class="formHeading">Street Address</div>
        <input type="text" id="streetAddress" formControlName="streetAddress">
        <div class="errorMessage" *ngIf="form.controls.streetAddress.touched && !form.controls.streetAddress.valid">Street Address is required</div>
    </div>

    <div class="form-row">
        <div class="formHeading">Zip Code</div>
        <input type="text" id="zip" formControlName="zip">
        <div class="errorMessage" *ngIf="form.controls.zip.touched && !form.controls.zip.valid">Zip code has to be 5 digits long</div>
    </div>

    <div class="form-row">
        <div class="formHeading">Address Type</div>
        <select id="type" formControlName="type">
            <option [value]="'home'">Home Address</option>
            <option [value]="'billing'">Billing Address</option>
        </select>
    </div>
    <div class="form-row">
        <button type="submit" [disabled]="!form.valid">Save</button>
    </div>

</form>

<div class="form-row">
    <div *ngIf="payLoad"><strong>The form contains the following values</strong></div>
    <div>
        {{payLoad}}
    </div>
</div>

<h4><a href="http://www.syntaxsuccess.com/viewarticle/forms-and-validation-in-angular-2.0">Read more here</a></h4>